<template>
  <div class="box">    
    <div class="bar">
        <RouterView />
        <div v-for="item in list" :key="item.id">
            <span @click="handler" class="item-icon" :class="item.icon" :key="item.id"></span>
            <span>{{ item.label }}</span>
        </div>
    </div>
</div>  
    </template>
    
    <script setup>
    import { ref } from 'vue';
    import  { nanoid } from 'nanoid';
    import router from "./router";
    
    const list = ref([
      {
        id: nanoid(6),
        label: '购物车',
        icon: 'far fa-address-book',
        add:'/mnue'
      },
      {
        id: nanoid(6),
        label: '收 藏',
        icon: 'far fa-chart-bar',
        add:'/star'
      },
      {
        id: nanoid(6),
        label: '首 页',
        icon: 'far fa-building',
        add:'/home'
      },
      {
        id: nanoid(6),
        label: '设 置',
        icon: 'fas fa-cog',
        add:'setting'
      },
      {
        id: nanoid(6),
        label: '我 的',
        icon: 'far fa-grin-alt',
        add:'/my'
      }
    ]);
    
    const handler = e => {
    // console.dir(e.target.__vnode.key);
    list.value.forEach(_item => {
        if (_item.id == e.target.__vnode.key) router.push(_item.add);
    })
}
    
    </script>
    
    <style  lang="scss" scoped>
     .box {
      width: 100%;
      height: 500vh;
     }
    
     .is-active {
      color: blue;
     }
    
     .bar {
      position: fixed;
      bottom: 0px;
    
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    
      width: 100%;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    
     }
    
     .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
     
      padding: 15px;
     }
    </style>